﻿<%@ page language="java" pageEncoding="UTF-8"
	errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选择目的地--行程--禅境旅行</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<%@include file="/ui/portal/commonjscss.jsp"%>
</head>
<body>
	<div class="page">
		<%@include file="/ui/portal/head.jsp"%>
		<div id="container" class="container margin10">
			<div class="trip-area-title">只要花费三分钟时间，就可以制作自己的个性化旅行计划</div>
			<div class="trip-area-step">
				<div class="trip-area-step-prev">
					<a href="javascript:void(0)">上一步</a>
				</div>
				<c:set value="1" var="step"></c:set>
				<%@include file="/ui/portal/trip/edit_steps.jsp"%>
				<div class="trip-area-step-next">
					<a href="javascript:void(0)">下一步</a>
				</div>
			</div>
			<div class="trip-area-have">
				<ul id="selected_container">
					<li class="trip-area-have-name">已添加:</li>
					<c:forEach var="dest" items="${tripTripdests }">
						<li id="dest${dest.tripdestId }">
							${dest.destName }
							<a href="javascript:void(0)"  data-trip_tripdest_id="${dest.tripTripdestId }" 
								data-tripdest_id="${dest.tripdestId}" data-dest_name="${dest.destName }" 
								data-dest_id="${dest.destId }" data-google_id="${dest.googleId }">
							<img src="${cpath }/resources/portal/img/trip/del.png"/>
							</a>
						</li>
					</c:forEach>
					<!-- 
                    <li>圣巴里圣母院<img src="${cpath }/resources/portal/img/trip/del.png" /></li>
                    -->
				</ul>
			</div>
			<div class="trip-area-maopcontrol">
                <div class="trip-area-maopcontrol-button">
                    <a class="ac" href="javascript:void(0)">自定义目的地</a>
                </div>
            </div>
            <div class="trip-area-map" style="display: none;">
             <div class="trip-area-map-info"></div>
                <div class="trip-area-map-search">
                    <input id="address" class="searchinput" type="textbox" placeholder="请输入要自定义的目的地名称">
                    <input id="query" type="button" value="查询" class="searchinputbutton">
                    <input id="bound" type="button" value="选择区域" class="searchinputbutton boderleftnone" onclick="bound()">
                    <input id="clearBound" type="button" value="清除区域" class="searchinputbutton boderleftnone borderrightnone"
                        onclick="clearBound()">
                </div>
            </div>
			<div class="trip-area-list">
				<c:forEach var="dest" items="${tripdests }">
					<div class="trip-area-mod">
						<div class="trip-area-mod-title">${dest.name }</div>
						<div class="trip-area-mod-img">
							<img
								src="${image_domain }${dest.image}@!small" />
						</div>
						<div class="trip-area-mod-button">
							<a href="javascript:void(0)" data-tripdest_id="${dest.tripdestId}" data-dest_name="${dest.name }"
								data-dest_id="${dest.destId }" data-google_id = "${dest.googleId }">添加</a>
						</div>
					</div>
				</c:forEach>
				<div class=" clear1"></div>
			</div>
			<div class=" clear1"></div>
		</div>
		<%@include file="/ui/portal/footer.jsp"%>
	</div>
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXF4z-R35SvrcxQNsQJUd6JIs4X1fAoZw&sensor=false&libraries=places,drawing&hl=zh-CN"></script>
	<script src="${cpath}/resources/portal/js/jquery.json-2.4.min.js" type="text/javascript"></script>
	<script src="${cpath}/resources/portal/js/trip.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			TripAPI.init("${cpath}");
			var tripdest = $(window).tripdest();
			$(".trip-area-step-next").click(function(){
				if (!tripdest.hasDest()){
					alert("必须添加目的地");
					return false;
				}
				if (tripdest.isEdited()){
					$(window).tripdest().submit("${trip.tripId}");
				} else {
					window.location.href = "${cpath}/trip/edit/add-location?tid=${trip.tripId}";
				}
			});
			var map = $(".trip-area-map-info").tripmap({
				search:{
				input:"#address",
				submit:"#query",
				bound:"#bound",
				clearBound:"#clearBound"
			},
			drawenable:true,
			addPlace:function(data){
				this.closeWindow();
				//alert(data.formatted_address);
				tripdest.drawAddDest({
					dest_name:data.name,
					lat:data.geometry.location.lat(),
					lng:data.geometry.location.lng(),
					google_id:data.id,
					google_reference:data.reference
				});
			}});
			$(".trip-area-maopcontrol-button a").triptoggle({
				one:function(){
					$(".trip-area-map").show();
					map.show();
				},
				two:function(){
					$(".trip-area-map").hide();
				}
			});
		});
    </script>
</body>
</html>
